<template>
    <view>
        <div class="flow-table-container">
            <!-- 检索区域 -->
            <div class="search-area">
                <div class="search-item">
                    <a-input :style="{ minWidth: '240px' }" v-model:model-value="query.searchKey" placeholder="输入关键词"
                        allow-clear :max-length="16">
                        <template #prefix> <icon-search /> </template>
                    </a-input>
                </div>
                <div class="btns-list">
                    <a-button style="width: 120px;" type="primary" @click="$.emit('event-create', null)">
                        新建事件
                        <template #icon> <icon-plus /> </template>
                    </a-button>
                </div>
            </div>
            <div class="flow-table-main">

                <div class="flow-table-content">
                    <AntdZh>
                        <a-table bordered :columns="columns" :data-source="tableData" :bordered="false"
                            :loading="tableLoading" :pagination="false" rowKey="id" @change="handleTableChange">
                            <template #expandedRowRender="{ record }">

                                <EventService :eventId="record.eventId"></EventService>
                            </template>
                            <template #bodyCell="{ column, record, index }">
                                <template v-if="column.dataIndex === 'status'">
                                    <!--执行状态-->
                                    <a-tag color="green" v-if="record.status">启用</a-tag>
                                    <a-tag color="red" v-else>停用</a-tag>

                                </template>
                                <template v-else-if="column.dataIndex === 'isAsync'">
                                 
                                    <icon-swap v-if="record.isAsync" style="color:darkgreen;font-size: 24px;"/>
                                    <icon-sync v-else  style="color:darkgreen;font-size: 24px;"/>
                                
                                </template>
                                <template v-else-if="column.dataIndex === 'eventRange'">
                                    <!--执行状态-->
                                    全局事件
                                </template>
                                <template v-else-if="column.dataIndex === 'runScript'">
                                    <a-popover title="执行脚本">
                                        <template #content>
                                            <JsonEditor style="width: 400px;" v-model:value="record.runScript" readOnly>
                                            </JsonEditor>
                                        </template>
                                        <CodeOutlined style="color:black;font-size: 24px;"></CodeOutlined>
                                    </a-popover>
                                </template>
                                <template v-if="column.dataIndex === 'action'">
                                    <a-row>
                                        <a-col :span="8">
                                            <a-tooltip>
                                                <template #title>修改信息</template>
                                                <view>
                                                    <a-button type="link" @click="$.emit('event-update', record.id)">
                                                        <FormOutlined />
                                                    </a-button>
                                                </view>
                                            </a-tooltip>
                                        </a-col>
                                        <a-col :span="8">
                                            <a-popconfirm title="是否删除该事件 ?" @confirm="handleDelete(record.id)">
                                                <a-tooltip>
                                                    <template #title>事件删除</template>
                                                    <view>
                                                        <a-button type="link">
                                                            <DeleteOutlined style="color: #f5222d;" />
                                                        </a-button>
                                                    </view>
                                                </a-tooltip>
                                            </a-popconfirm>
                                        </a-col>
                                    </a-row>
                                </template>
                            </template>
                        </a-table>
                    </AntdZh>

                </div>
                <div class="fenye" v-if="query.total > 0">
                    <a-pagination show-total @change="reqData()" :total="query.total" :page-size="query.pageSize"
                        :current="query.pageNum" />
                </div>
            </div>
        </div>
        <EventCreateModal />
        <EventUpdateModal/>
    </view>
</template>

<script setup>
import EventCreateModal from "./components/EventCreateModal/index.vue";
import EventUpdateModal from "./components/EventUpdateModal/index.vue";
import EventService from './components/EventService/index.vue'
import useApp from '@/hooks';
const { $ } = useApp();
import { SafetyOutlined, FormOutlined, KeyOutlined, PlusOutlined, DeleteOutlined, DesktopOutlined, SyncOutlined, CodeOutlined } from '@ant-design/icons-vue';
import { Table as ATable, Button as AButton, Tooltip as ATooltip, Popconfirm as APopconfirm } from "ant-design-vue";
import { IconSearch, IconPlus, IconDelete, IconEdit, IconStop, IconCheckCircle, IconSwap, IconSync } from "@arco-design/web-vue/es/icon";
import EventApi from "@/api/FlowEvent";
import { columns } from './flow-event';
const tableData = ref([])
const tableLoading = ref(false)
const query = ref({
    total: 0,
    pageSize: 10,
    pageNum: 1
})
// 监听刷新
$.on('fresh-event', r => {
    reqData();
})
function reqData() {
    tableLoading.value = true;
    EventApi.queryList(query.value).then(res => {
        console.log(res.content)
        tableLoading.value = false;
        tableData.value = res.content;
        query.value.total = res.totalElements;
    })
}
function handleTableChange(page, filters, sorted) {
    query.value.pageNum = 1;
    // 获取 status
    // 状态
    var status = filters.status;
    if ($.isNotEmpty(status)) {
        query.value.status = status[0];
    } else {
        query.value.status = null
    }
    // 事件同步异步查询
    var isAsync = filters.isAsync;
    if ($.isNotEmpty(isAsync)) {
        query.value.isAsync = isAsync[0];
    } else {
        query.value.isAsync = null
    }
    reqData();
}
// 处理删除
function handleDelete(id) {
    EventApi.deleteOne(id).then(res => {
        $.message.success("删除成功");
        reqData();
    })
}
reqData();
</script>

<style lang="less">
@import "@/styles/ftable.less";
</style>